<template>
    <div>
        <div style="text-align: left; margin-bottom: 10px">
            <el-select v-model="selectedTimeOption"
                       placeholder="选择时间"
                       size="mini"
                       @change="changeStartTime"
                       style="margin-left: 10px">
                <el-option
                        v-for="item in timeOptions"
                        :key="item"
                        :label="item"
                        :value="item">
                </el-option>
            </el-select>
            <el-select v-model="params.dorm"
                       placeholder="选择楼舍"
                       size="mini"
                       :disabled="!params"
                       @change="changeDorm"
                       style="margin-left: 10px">
                <el-option
                        v-for="item in dorms"
                        :key="item"
                        :label="item"
                        :value="item">
                </el-option>
            </el-select>
            <el-input type="text"
                      style="width: 200px; margin: 0px 5px;"
                      placeholder="寝室房间号"
                      size="mini"
                      :disabled="!params || !params.dorm"
                      v-model="params.room" clearable>
            </el-input>
            <el-input type="text"
                      style="width: 200px; margin: 0px 5px;"
                      placeholder="员工姓名"
                      size="mini"
                      v-model="params.workerName" clearable>
            </el-input>
            <el-button size="mini" style="margin: 5px 0 0 5px;" @click="clearSearchParams">
                清空
            </el-button>
            <el-button size="mini" style="margin: 5px 0 0 5px;" type="primary" @click="search">
                查询
            </el-button>
        </div>


        <!--列表-->
        <div style="margin: 0px 10px;text-align: left;">
            <el-table
                    :data="taskLogs"
                    stripe
                    :default-sort="{prop: 'area', order: 'desc'}">

                <el-table-column prop="dorm" label="楼舍" sortable></el-table-column>
                <el-table-column prop="room" label="寝室" sortable></el-table-column>
                <el-table-column prop="timestamp" label="时间" sortable show-overflow-tooltip></el-table-column>
                <el-table-column prop="waterPrice" label="水票价格"></el-table-column>
                <el-table-column prop="bucketNum" label="送出水桶" sortable></el-table-column>
                <el-table-column prop="receiveEmptyBucketNum" label="收回空桶" sortable></el-table-column>
                <el-table-column prop="workerName" label="送水人姓名"></el-table-column>

            </el-table>
            <!--分页组件-->
            <el-row style="float: right">
                <el-pagination
                        @current-change="changePage"
                        @size-change="changePageSize"
                        :current-page.sync="params.pageNo"
                        :page-sizes="[5, 10, 20, 30, 50, 100]"
                        :page-size.sync="params.pageSize"
                        layout=" total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-row>

        </div>
    </div>
</template>

<script>
    import {getDormList, getRoomsOfDorm} from "@/api/modules/app/addressApi";
    import {searchTaskLogs} from "@/api/modules/app/taskLogApi";

    export default {
        name: "taskLogComponent",
        data() {
            return {
                taskLogs: [],
                total: 0,
                timeOptions: ["今天", "最近三天", "本周", "本月", "最近三月", "今年", "全部"],
                selectedTimeOption: "今天",
                areas: ["老区", "二区", "三区", "研究生公寓"], // 常量 数据库里enum
                dorms: [],
                rooms: [],
                // 查询参数
                params: {
                    startTime: 0,
                    area: null, // 当前选择的楼区 用于查询用
                    dorm: null,
                    room: null,
                    workerName: null,
                    pageNo: 1,
                    pageSize: 10,
                },
            }
        },
        mounted() {
            this.changeStartTime(this.timeOptions[this.timeOptions.length - 1]);
            this.getAllDormList();
            this.search()
        },
        methods: {
            getAllDormList() {
                let that = this;
                // 所有楼舍
                getDormList().then(result => {
                    that.dorms = result.data;
                    that.searchParams.dorm = null;
                    that.searchParams.room = null;
                    that.search();
                })
            },
            // 切换页数
            changePage(pageNo) {
                this.params.pageNo = pageNo;
                this.search()
            },
            // 改变页面大小
            changePageSize(pageSize) {
                this.params.pageSize = pageSize;
                this.search()
            },
            // 获取所有数据
            search() {
                // this.params.pageNo = 1;
                // this.params.pageSize = 10;
                let that = this;
                let params = that.params;
                searchTaskLogs(params.startTime, params.area, params.dorm, params.room, params.workerName,
                    params.pageNo, params.pageSize).then(result => {
                    that.total = result.data.total;
                    that.taskLogs = result.data.records;
                })
            },
            // 选择开始时间
            changeStartTime(timeOption) {
                this.selectedTimeOption = timeOption;
                console.log("开始时间", timeOption);
                let startTime = new Date();
                startTime.setHours(0, 0, 0);
                if (timeOption === '今天') {
                    this.params.startTime = startTime.getTime();
                } else if (timeOption === '最近三天') {
                    startTime.setDate(startTime.getDate() - 2)
                    this.params.startTime = startTime.getTime();
                } else if (timeOption === '本周') {
                    startTime.setDate(startTime.getDate() - startTime.getDay() + 1); // 本周
                    this.params.startTime = startTime.getTime();
                } else if (timeOption === '本月') {
                    startTime.setDate(1); // 本月
                    this.params.startTime = startTime.getTime();
                } else if (timeOption === '最近三月') {
                    startTime.setMonth(startTime.getMonth() - 2)
                    this.params.startTime = startTime.getTime();
                } else if (timeOption === '今年') {
                    startTime.setMonth(0)
                    startTime.setDate(1);
                    this.params.startTime = startTime.getTime();
                } else if (timeOption === '全部') {
                    startTime.setTime(0);
                    this.params.startTime = startTime.getTime();
                }
                console.log("[选择开始时间]", startTime.toLocaleDateString(), startTime.toTimeString());
                this.search();
            },
            // 切换楼舍
            changeDorm(dorm) {
                // 获取楼区所有寝室
                getRoomsOfDorm(this.params.area, dorm).then(result => {
                    this.rooms = result.data;
                    this.params.room = null;
                    this.search();
                })
            },
            // 清除
            clearSearchParams() {
                this.params.area = null;
                this.params.dorm = null;
                this.params.room = null;
                this.search();
            }
        }
    }
</script>
